<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oppo</title>
    <link rel="stylesheet" href="oppo.css">
    <link rel="stylesheet" href="swiper.min.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="top">
        <div class="container"></div>
    </div>
    <!-- 页面的顶部 -->
    <div id="header">
        <div class="container">
            <div class="header_left left">
                <div class="xlwb"></div>
                <div class="txwb"></div>
                <div class="tel">4001-666-888</div>
            </div>
            <ul class="right">
                <li><a href="">注册</a></li>
                <li><a href="">登录</a></li>
                <li><a href="">积分兑换</a></li>
                <li><a href="">帮助中心</a></li>
                <li>
                    <div class="shop"></div>
                </li>
                <li><a class="lilast" href=""><span></span>购物车</a></li>
            </ul>
        </div>
    </div>
    <!-- 页面的头部 -->
    <div id="nav">
        <div class="container">
            <div class="nav_left left"></div>
            <div class="right">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">手机</a></li>
                    <li><a href="">配件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">体验店</a></li>
                    <li><a href="">软件商店</a></li>
                    <li><a href="">colorOS</a></li>

                </ul>
            </div>
        </div>
    </div>
    <!-- 页面的导航栏 -->
    <div id="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
    <!-- 页面的banner部分 -->
    <div id="star">
        <div class="container">
            <div class="star_top">
            </div>
            <ul class="star_content">
                <li>
                    <div>
                        <img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
                    </div>
                    <h2>N2</h2>
                    <p>3000万电动摄像头</p>
                    <p class="price">&yen; 3999 立即购买<span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/20150120092342k2ABsEHnQN.jpg" alt="">
                    </div>
                    <h2>N2</h2>
                    <p>3000万电动摄像头</p>
                    <p class="price">&yen; 3999 立即购买<span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
                    </div>
                    <h2>N2</h2>
                    <p>3000万电动摄像头</p>
                    <p class="price">&yen; 3999 立即购买<span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/20150120092342k2ABsEHnQN.jpg" alt="">
                    </div>
                    <h2>N2</h2>
                    <p>3000万电动摄像头</p>
                    <p class="price">&yen; 3999 立即购买<span></span></p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面的明星机型部分 -->
    <div id="accessor">
        <div class="container">
            <div class="acc_top">
                <img src="img/wb.png" alt="">
            </div>
            <div class="acc_cont">
                <div class="conleft left">
                    <img class="m1" src="img/20150413174400N0dPnxUKHk.jpg" alt="">
                    <div class="left ear">
                        <p>oppo手机官网配件
                        <p>
                        <div class="line"></div>
                        <ul>
                            <li>耳机</li>
                            <li>耳机</li>
                            <li>耳机</li>
                            <li>耳机</li>
                            <li>耳机</li>
                            <li>耳机</li>
                        </ul>
                        <div class="line"></div>
                        <p>耳机配件<span></span></p>
                    </div>
                    <img class="m2" src="img/20131120165101xYIYzhkVEy.jpg" alt="">
                    <img class="m3" src="img/20150413174340NLV2gvV4FU.jpg" alt="">
                </div>
                <div class="contright left">
                    <div class="hm1"><img src="img/20150123182505RO822scYYt.jpg" alt=""></div>
                    <div class="hm2"><img src="img/20141230145609l7Fsk7CdHy.jpg" alt=""></div>
                    <div class="hm3"><img src="img/20141011101157yZEFpMrk0h.jpg" alt=""></div>
                    <div class="hm4"><img src="img/201410270957132inlm3IwsV.jpg" alt=""></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面的精选配件部分 -->
    <div id="world">
        <div class="container">
            <div class="world_top"><img src="img/weibo.png" alt=""></div>
            <div class="world_cont ">
                <div class="world_contl left ">
                    <div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
                    <div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
                    <div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
                    <div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
                </div>
                <div class="world_contr right ">
                    <div class="title ">
                        <div>微博</div>
                        <div>新闻</div>
                    </div>
                    <div class="items">
                        <dl>
                            <dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
                            <dd>oppo手机开启纽约梦幻之旅</dd>
                        </dl>
                        <dl>
                            <dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
                            <dd>oppo手机开启纽约梦幻之旅</dd>
                        </dl>
                        <dl>
                            <dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
                            <dd>oppo手机开启纽约梦幻之旅</dd>
                        </dl>
                        <dl>
                            <dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
                            <dd>oppo手机开启纽约梦幻之旅</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面的搜索oppo部分 -->
    <div id="serve">
        <div class="container">
            <div>
                <dl>
                    <dt></dt>
                    <dd class="dd1">正品保证</dd>
                    <dd class="dd2">原装进口，假一赔十</dd>
                </dl>
            </div>
            <div>
                <dl>
                    <dt></dt>
                    <dd class="dd1">正品保证</dd>
                    <dd class="dd2">原装进口，假一赔十</dd>
                </dl>
            </div>
            <div>
                <dl>
                    <dt></dt>
                    <dd class="dd1">正品保证</dd>
                    <dd class="dd2">原装进口，假一赔十</dd>
                </dl>
            </div>
            <div>
                <dl>
                    <dt></dt>
                    <dd class="dd1">正品保证</dd>
                    <dd class="dd2">原装进口，假一赔十</dd>
                </dl>
            </div>
            <div>
                <dl>
                    <dt></dt>
                    <dd class="dd1">正品保证</dd>
                    <dd class="dd2">原装进口，假一赔十</dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 页面的服务部分 -->
    <div id="afterserver">
        <div class="container">
            <div>
                <ul>
                    <li>关于我们</li>
                    <li>关于OPPO</li>
                    <li>新闻中心</li>
                    <li>人才招聘</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>推荐机型</li>
                    <li>N3</li>
                    <li>R5</li>
                    <li>RIC</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>购物相关</li>
                    <li>推荐产品</li>
                    <li>帮助中心</li>
                    <li>OPPO体验店</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>会员中心</li>
                    <li>产品注册</li>
                    <li>会员登陆</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>关于我们</li>
                    <li><span class="xlwb"></span>新浪微博</li>
                    <li><span class="txwb"></span>腾讯微博</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>联系我们</li>
                    <li><span class="net1"></span><br><span class="net2">在线服务</span></li>
                    <li><span class="tel1"></span><br><span class="tel2">4001-666-888</span></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 页面的售后服务部分 -->
    <div id="footer">
        <div class="container">
            <img src="img/i-f-logo.png" alt="">
            <span>@2005-2005 北京***有限公司</span>
            <a href="">联系我们</a>
            <a href="">联系我们</a>
            <a href="">联系我们</a>
            <a href="">联系我们</a>
            <a href="">联系我们</a>
        </div>
    </div>
    <!-- 页面的底部 -->
    <script src="swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
    </script>
</body>

</html>